<template>
  <div>
    <!-- 导航卡片 -->
    <div class="tabs">
      <div class="w1200">
        <div @click="toExer">前往练习题</div>
        <div @click="toRecord">成绩单分析</div>
        <div @click="toStudyplan">学习计划</div>
        <div @click="toMyhomework">作业本</div>
        <div @click="toJjdownload">机经下载</div>
        <div @click="toCommunity">资讯</div>
       
      </div>
    </div>
    <!-- 练习足迹区域 -->
    <div class="h470">
      <div class="main">
        <div class="footmark">
          <div class="title">练习足迹<span>一日之计在于晨</span></div>
          <div class="content">
            <div class="rest">距离考试还剩</div>
            <div class="num" v-if="homeData.testDate">
              {{ homeData.testDate | restTime }}<span>天</span>
            </div>
            <div class="num" v-else>未设置</div>
            <div class="topract" @click="$router.push('exercise')">
              前往练习题>
            </div>
          </div>
          <div class="foot">
            <div>
              <span> {{ homeData.todayLx }}</span>
              <span class="count">今日练题</span>
            </div>
            <div>
              <span>{{ Math.floor((homeData.totalTime % 86400) / 3600) }}</span>
              <span class="count">练习时长(h)</span>
            </div>
            <div>
              <span>{{ homeData.totalLx }}</span>
              <span class="count">总计数量</span>
            </div>
          </div>
        </div>
        <div class="analyse">
          <div class="title">成绩单分析<span></span></div>
          <div class="content">
            <div class="grade">
              <div>
                <span
                  >口语：{{
                    schoolReport != null ? schoolReport.kkouyu : ""
                  }}</span
                >
                <span
                  >听力：{{
                    schoolReport != null ? schoolReport.ktingli : ""
                  }}</span
                >
                <span
                  >阅读：{{
                    schoolReport != null ? schoolReport.kyuedu : ""
                  }}</span
                >
                <span
                  >写作：{{
                    schoolReport != null ? schoolReport.kxiezuo : ""
                  }}</span
                >
                <span
                  >语法：{{
                    schoolReport != null ? schoolReport.kyufa : ""
                  }}</span
                >
              </div>
              <div>
                <span
                  >流利：{{
                    schoolReport != null ? schoolReport.kliuli : ""
                  }}</span
                >
                <span
                  >拼写：{{
                    schoolReport != null ? schoolReport.kpingxie : ""
                  }}</span
                >
                <span
                  >发音：{{
                    schoolReport != null ? schoolReport.kfayin : ""
                  }}</span
                >
                <span
                  >词汇：{{
                    schoolReport != null ? schoolReport.kcihui : ""
                  }}</span
                >
                <span
                  >表达：{{
                    schoolReport != null ? schoolReport.kbiaoda : ""
                  }}</span
                >
              </div>
            </div>
            <div class="allgrade">
              总分 :<span>
                {{ schoolReport != null ? schoolReport.ktotal : "" }}</span
              >
            </div>
            <!-- <div class="h120">
              总体成绩还可以，阅读部分较差，可以有很大提升空间，可以着重联系提升
            </div> -->
          </div>
          <!-- 底部 -->
          <div>
            <router-link @click.native="aIanalysis()" to="" class="newanalyse">
              获取分析结果 &gt;
            </router-link>
          </div>
        </div>
        <div class="analyse">
          <div class="title">我的作业本<span></span></div>
          <div class="content">
            <div class="_h120">
              <!-- 作业本描述 -->
              {{ homeData.wdzyb }}
            </div>
          </div>
          <!-- 底部 -->
          <div>
            <router-link to="/myhomework" class="link_homework">
              前往我的作业本 &gt;
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 定制练习 -->
    <!-- 定制练习 -->
    <div class="dzlx">
      <div class="main">
        <div class="analyse w796">
          <div class="title">学习计划<span></span></div>
          <div class="content">
            <!-- 定制练习描述 -->
            {{ homeData.xxjh }}
          </div>
          <!-- 底部 -->
          <div>
            <router-link to="/studyplan" class="w220">
              前往学习计划 &gt;
            </router-link>
          </div>
        </div>
        <div class="info">
          <div class="title">最新资讯<span></span></div>
          <span
            v-for="(item, index) in zxList"
            :key="index"
            class="list"
          >
            <div class="listnum">{{ index + 1 }}</div>
            <div class="bt" @click="toArtDetail(item.id)">{{ item.title }}</div>
            <div class="imgshow zx"><img v-lazy="item.imgur" alt="" /></div>
          </span>
        </div>
      </div>
    </div>
    <div class="dzlx">
      <div class="main">
        <div class="analyse w796">
          <div class="title">定制练习<span></span></div>
          <div class="content">
            <!-- 定制练习描述 -->
            {{ homeData.dzlx }}
          </div>
          <!-- 底部 -->
          <div>
            <router-link to="/studyplan" class="w220">
              前往定制练习 &gt;
            </router-link>
          </div>
        </div>
        <div class="info">
          <div class="title">机经下载<span></span></div>
          <router-link
            to=""
            class="list"
            v-for="(item, index) in fileList"
            :key="index"
          >
            <div class="listnum">{{ index + 1 }}</div>
            <div class="bt duration">{{ item.name }}</div>
            <div class="dldicon" @click="getFile(item.id)">
              <i class="iconfont icon-xiazai3"></i>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 路由占位符 -->
    <!-- <router-view></router-view> -->
     <!-- 侧边咨询组件 -->
    <Asider></Asider>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '../../../utils/http'
import Asider from '../../aside'
export default {
  name: 'Practice',
  components: {
     Asider
  },
  data () {
    return {
      activeIndex: '1',
      systemDate: '',
      homeData: {},
      schoolReport: {},
      fileList: [],
      url: '',
      zxList: []
    }
  },
  created () {
    // 保存到本地存储，记录点击了哪个tab项
    this.activeIndex = window.sessionStorage.getItem('activeIndex')
    this.getDate()
    this.getHomeDataUser()
    this.getSchoolReport()
    this.getFileList()
    this.getZxList()
  },
  methods: {
    // 去资讯详情页
    toArtDetail (id) {
      this.$router.push('/community/articleDetail?id=' + id)
    },
    // 获取资讯列表
    getZxList () {
      sendPost(api.getZxList, {
        page: 1,
        rows: 20,
      }).then(res => {
        console.log(res);
        this.zxList = res.data.list
      })
    },
    getFile (fileId) {
      // console.log(fileId);
      this.getFileUrl(fileId)
      // this.downLoadFile(this.url)
    },

    filerName (url) {
      // 提取下载的文件名
      let a = url.split('/');
      return a[a.length - 1];
    },
    // 文件下载方法
    // downLoadFile (url) {
    //   var eleLink = document.createElement('a');
    //   eleLink.style.display = 'none';
    //   eleLink.download = this.filerName(url);
    //   var blob = new Blob([url]);
    //   eleLink.href = URL.createObjectURL(blob);
    //   document.body.appendChild(eleLink);
    //   eleLink.click();
    //   document.body.removeChild(eleLink);
    // },
    // 获取下载地址
    getFileUrl (fileId) {
      sendPost(api.getFileUrl, { id: fileId }).then(res => {
        // console.log(res.data);
        this.url = res.data
        window.open(res.data)
      })
    },
    // 获取获取文件下载列表
    getFileList () {
      sendPost(api.getFileList, {
        page: 1,
        rows: 20,
        type: 1,
      }).then(res => {
        // console.log(res);
        this.fileList = res.data.list.reverse()
      })
    },
    // 获取学习成绩单
    getSchoolReport () {
      sendPost(api.getSchoolReport, {}).then(res => {
        console.log(res);
        this.schoolReport = res.data
      })
    },
    getHomeDataUser () {
      sendPost(api.getHomeDataUser, {}).then(res => {
        // console.log(res);
        this.homeData = res.data
        if (this.homeData.testDate < this.systemDate) {
          this.homeData.testDate = '未设置'
          return
        }
      })
    },
    getDate () {
      let date = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        date: new Date().getDate(),
      }
      let systemDate = date.year + '-' + (date.month > 9 ? date.month : '0' + date.month) + '-' + (date.date > 9 ? date.date : '0' + date.date);
      // console.log(systemDate);
      this.systemDate = systemDate
    },
    handleSelect () {
    },
    toExer () {
      this.$router.push('cate')
    },
    toRecord () {
      this.$router.push('record')
    },
    toStudyplan () {
      this.$router.push('studyplan')
    },
    toMyhomework () {
      this.$router.push('myhomework')
    },
    toJjdownload () {
      this.$router.push('jjdownload')
    },
    toCommunity () {
      this.$router.push('community')
    },
    //跳转成绩单分析页面
    aIanalysis () {
      console.log(this.schoolReport)
      if (this.schoolReport==null) {
        this.$router.push('record')
      } else {
        this.$router.push('AIanalysis')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search-ipt {
  width: 18rem;
  height: 2.5rem;
  margin-top: 0.625rem;
  /deep/.el-input__inner {
    border-radius: 1.25rem;
  }
}
/deep/.el-input__prefix {
  left: 0.9375rem;
}
/deep/.el-input--prefix .el-input__inner {
  padding-left: 2.8125rem;
}
/deep/.el-input__inner:focus {
  border-color: #13bfbf;
  color: #13bfbf;
  .el-input__prefix {
    color: #13bfbf;
  }
}
/deep/.el-input__inner::placeholder {
  color: #13bfbf;
  font-size: 1rem;
}
.tabs {
  height: 2rem;
  .w1200 {
    width: 75rem;
    background-color: #fff;
    height: 4rem;
    line-height: 4rem;
    margin: 1.875rem auto;
    display: flex;
    font-size: 1.125rem;
    color: #333;
    div {
      padding-left: 3.125rem;
      cursor: pointer;
    }
    div:hover {
      color: #ff5e4e;
    }
  }
}
.main {
  width: 75rem;
  margin: auto;
  border-radius: 0.3125rem;
  overflow: hidden;
  padding-bottom: 1.25rem;
  box-sizing: border-box;
}
.courseprod {
  height: 28.5rem;
  padding: 3rem 0;
  padding-bottom: 0px;
  // padding-top: 0;
  box-sizing: border-box;
  .main {
    width: 75rem;
    height: 25.75rem !important;
    margin: auto;
    display: flex;
    border-radius: 0.3125rem;
    overflow: hidden;
    .coursecontent {
      margin-left: 1.9875rem;
      width: 47.75rem;
      position: relative;
        cursor: pointer;
      .content {
        background-color: #fff;
        height: 24.45rem !important;
        width: 49.75rem;
        padding: 1.25rem;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .title {
          border-bottom: 1px solid #eee;
          line-height: 3.75rem;
          display: flex;
          box-sizing: border-box;
          font-size: 1rem;
            cursor: pointer;
          .plan {
            width: 5.625rem;
          }
          .tips {
            color: #999;
          }
        }
        .txt {
          padding: 1rem 0;
          line-height: 2rem;
          text-indent: 0;
          letter-spacing: 0.15625rem;
          font-size: 0.875rem;
            cursor: pointer;
        }
        .btn {
          width: 10.75rem;
          height: 3.125rem;
          line-height: 3.125rem;
          background-color: #ededed;
          text-align: center;
          text-decoration: none;
          color: #999;
          font-size: 1rem;
          cursor: pointer;
        }
      }
    }
    .percent {
      width: 23.5625rem;
      font-size: 1.125rem;
      color: #fff;
      text-align: center;
      line-height: 3.75rem;
      background-color: #fff;
      .title {
        display: flex;
        div {
          flex: 1;
          height: 3.75rem;
          background-color: #ff5e4e;
          cursor: pointer;
        }
      }
      .ztyc {
        height: 4rem;
        font-size: 1.25rem;
        line-height: 4rem;
        color: #999;
      }
      .bt {
        display: flex;
        color: #999;
        font-size: 1.25rem;
          cursor: pointer;

        div {
          flex: 1;
          text-align: center;
        }
        .pj {
          color: #ff5e4e;
        }
      }
      .number {
        display: flex;
        div {
          flex: 1;
          height: 3.75rem;
          span {
            color: #ff5e4e;
          }
          .fz60 {
            font-size: 3.75rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
          }
        }
        .fz60-999 {
          color: #999;
          font-size: 3.75rem;
          font-weight: bold;
        }
      }
      .btn {
        display: inline-block;
        width: 11.5rem;
        height: 3.125rem;
        line-height: 3.125rem;
        margin: 0 auto;
        font-size: 1rem;
        margin-top: 2.4rem;
        color: #fff;
        background: linear-gradient(to right, #ff9388, #ff5f4f);
        border-radius: 1.5625rem;
        text-decoration: none;
      }
    }
  }
}
.learnpte {
  background-color: #f2f4f7;
  height: 49.0625rem;
  box-sizing: border-box;
  margin: 0 auto;
  .h140 {
    height: 8.75rem;
    font-size: 2.5rem;
    line-height: 8.75rem;
    color: #333;
  }
  .h280 {
    height: 17.5rem;
    background-color: #fff;
    margin-bottom: 1.25rem;
    display: flex;
    border-radius: 0.3125rem;
    .title {
      flex: 1;
      position: relative;
      .tip {
        padding-top: 5.5rem;
        padding-left: 7.3rem;
        color: #666;
      }
      .nm {
        padding-left: 7.3rem;
        font-size: 1.75rem;
        line-height: 4.0625rem;
        font-weight: 400;
        color: #333;
      }
      .bdr50 {
        border-radius: 50%;
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
        text-align: center;
        color: #ff5e4e;
        position: absolute;
        background-color: #fff;
        right: -1.5rem;
        top: 42%;
        font-size: 1.75rem;
      }
    }
    .fz28 {
      font-size: 1.75rem;
      margin: 0.625rem 0;
    }
    .pd50 {
      padding: 0 3.125rem;
      font-size: 1.125rem;
      line-height: 2rem;
    }
    .contain {
      flex: 3;
      background-color: #ff5e4e;
      color: #fff;
      div {
        padding-left: 3.75rem;
      }
      .kccs {
        padding-top: 5.5rem;
      }
    }
    .contain2 {
      flex: 3;
      background-color: #ff994e;
      color: #fff;
      div {
        padding-left: 3.75rem;
      }
      .kccs {
        padding-top: 5.5rem;
      }
    }
  }
}
.lnff {
  width: 100%;
  height: 56.25rem;
  background-color: #e8eaed;
  .main {
    .title {
      font-size: 2.5rem;
      margin: 3rem 0;
    }
    .content {
      background-color: #fff;
      height: 45rem;
    }
  }
}
.h470,
.dzlx {
  .main {
    width: 75rem;
    height: 28.75rem !important;
    display: flex;
    justify-content: space-between;
    margin-top: 3.75rem;
    .footmark,
    .analyse,
    .info {
      width: 23.5625rem;
      background-color: #fff;
      padding: 0 1.25rem;
      box-sizing: border-box;
      position: relative;
      height: 25.6rem !important;
      overflow: hidden;
      .title {
        height: 4rem;
        line-height: 4rem;
        font-size: 1.25rem;
        font-weight: bold;
        border-bottom: 1px solid #eee;
        color: #333;
        span {
          font-size: 1rem;
          color: #999;
          font-weight: normal;
          margin-left: 0.625rem;
        }
      }
      .content {
        margin-top: 0.625rem;
        .rest {
          height: 6.25rem;
          font-size: 1.25rem;
          color: #999;
          line-height: 6.25rem;
          text-align: center;
        }
        .num {
          height: 4.375rem;
          font-size: 5rem;
          color: #ff5e4e;
          font-weight: bold;
          text-align: center;
          line-height: 4.375rem;
          span {
            font-size: 1.25rem;
          }
        }
        .topract {
          font-size: 1rem;
          color: #ff5e4e;
          text-align: center;
          cursor: pointer;
          margin-top: 1.25rem;
        }
      }
      .foot {
        height: 5.25rem;
        background-color: #ffdfdc;
        bottom: 0;
        left: 0;
        margin-top: 1.25rem;
        display: flex;
        div {
          flex: 1;
          display: flex;
          flex-direction: column;
          color: #ff5e4e;
          text-align: center;
          span {
            font-size: 1.5rem;
            line-height: 3rem;
            font-weight: 500;
          }
          .count {
            font-size: 1rem;
            line-height: 2rem;
            font-weight: normal;
          }
        }
      }
      .newanalyse {
        height: 3.125rem;
        text-align: center;
        line-height: 3.125rem;
        text-decoration: none;
        display: inline-block;
        width: 21.0625rem;
        flex: 0.9;
        font-size: 1rem;
        margin: 0 auto;
        color: #fff;
        background-color: #ff5e4e;
      }
      .link_homework {
        height: 3.125rem;
        text-align: center;
        line-height: 3.125rem;
        text-decoration: none;
        display: inline-block;
        // color: #999;
        font-size: 1rem;
        // background-color: #ededed;
        width: 100%;
        margin-top: 0.5rem;
         color: #fff;
        background-color: #ff5e4e;
      }
      .content {
        .grade {
          display: flex;
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            span {
              height: 2.8rem;
              line-height: 2.8rem;
              color: #333;
              font-weight: 500;
              font-size: 1.2rem;
            }
          }
        }
        .allgrade {
          font-size: 1.25rem;
          color: #333;
          text-align: right;
          height: 1.875rem;
          line-height: 1.875rem;
          margin-bottom: 0.625rem;
          span {
            color: #ff5e4e;
          }
        }
        .h120 {
          line-height: 2rem;
          font-weight: 400;
          color: #333;
          font-size: 1rem;
          margin-top: 1rem;
        }
      }
      .list:hover {
        color: #ff5e4e !important;
        .bt {
          color: #ff5f4f;
            cursor: pointer;
        }
        .listnum {
          border: 1px solid #ff5f4f !important;
        }
      }

      .list {
        display: flex;
        padding: 0.9375rem 0;
        padding-bottom: 0;
        text-decoration: none;
        color: #666;

        .listnum {
          width: 1.25rem;
          height: 1.25rem;
          line-height: 1.25rem;
          margin-top: 0.3rem;
          border: 1px solid #ccc;
          border-radius: 0.1875rem;
          text-align: center;
        }
        .bt {
          width: 12.5rem;
          margin-left: 1rem;
          line-height: 1.75rem;
          color: #666;
          font-family: PingFang SC;
          font-size: 1rem;
          height: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .imgshow {
          width: 6.25rem;
          height: 4.25rem;
          background-color: #c9c9c9;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.dldicon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 1rem;
}
.duration:hover {
  color: #ff5f4f !important;
}
.duration {
  width: 16.25rem !important;
}
._h120 {
  text-indent: 0;
  line-height: 2rem;
  font-size: 1rem;
  height: 16rem;
  overflow: hidden;
}
.dzlx {
  height: 29.25rem;
  .main {
    width: 75rem;
    height: 29.25rem !important;
    margin: auto;
    padding: 0;
    .content {
      height: 17rem !important;
      overflow: hidden;
    }
  }
  .w796 {
    width: 49.2rem !important;
    .content {
      width: 46.3rem;
      line-height: 2rem;
    }
    .w220 {
      display: flex;
      text-decoration: none;
      width: 12.75rem !important;
      height: 3.125rem;
      font-size: 1rem;
      line-height: 3.125rem;
      text-align: center;
      background-color: #ededed;
      color: #999;
      position: absolute;
      right: 1.25rem;
      padding-left: 3.75rem;
      box-sizing: border-box;
       color: #fff;
        background-color: #ff5e4e;
    }
    .content {
      text-indent: 0rem;
      font-size: 1rem;
    }
  }
}
</style>
